<template>
    <div class="register">
        <!-- <div
            class="info-contener"
            :size="'medium' | setSize('medium')"
            label-width="100px"
        >
            <div class="row">
                <div class="title">
                    <span class="text">默认间距</span>
                    <span class="line"></span>
                </div>
                <div
                    class="col"
                    v-for="(items, index) in infoList"
                    :key="index"
                >
                    <div class="item" v-for="(item, i) in items" :key="i">
                        <span class="label" align="right">{{
                            item.label
                        }}</span>
                        <span class="value">{{ item.value }}</span>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="box">
            <scroll-pane :scrollLength="20">
                <div class="items" v-for="(item, index) in 20" :key="index">
                    {{ item }}标签
                </div>
            </scroll-pane>
        </div>
    </div>
</template>
<script>
import ScrollPane from './components/scrollPane.vue'
export default {
    components: {
        ScrollPane
    },
    data() {
        return {
            infoList: [
                [
                    {
                        label: '手机',
                        value: '+86 13456272892'
                    },
                    {
                        label: '管理主体',
                        value: '兰州大方'
                    }
                ],
                [
                    {
                        label: '座机',
                        value: '734567'
                    },
                    {
                        label: '直属部门',
                        value: '软件部'
                    },
                    {
                        label: '合同结束日期',
                        value: '2022-12-20'
                    },
                    {
                        label: '合同金额',
                        value: '5000000元'
                    }
                ],
                [
                    {
                        label: '办公室邮箱',
                        value: 'acc@qq.com'
                    },
                    {
                        label: '职位',
                        value: '前端开发工程师'
                    },
                    {
                        label: '合同收付类型',
                        value: '付款'
                    },
                    {
                        label: '合同收付类型',
                        value: '付款'
                    }
                ]
            ]
        }
    },
    mounted() {},
    methods: {}
}
</script>
<style lang="scss">
.register {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: column,
        $justify: center,
        $align: center
    );
    .info-contener {
        @include box_flex(
            $width: 100%,
            $height: 100%,
            $direction: column,
            $justify: flex-start,
            $align: flex-start
        );
        .row {
            @include box_flex(
                $width: 100%,
                $height: auto,
                $direction: row,
                $justify: flex-start,
                $align: flex-start,
                $flex-wrap: wrap
            );
            .title {
                @include box_flex(
                    $width: 100%,
                    $height: auto,
                    $direction: row,
                    $justify: flex-start,
                    $align: center
                );
                .text {
                    margin-right: 10px;
                    white-space: nowrap;
                    @include font_color('primary');
                }
                .line {
                    width: 100%;
                    height: 1px;
                    @include background_color('info');
                }
            }
            .col {
                @include box_flex(
                    $width: 100%,
                    $height: auto,
                    $direction: column,
                    $justify: flex-start,
                    $align: flex-start
                );
                .item {
                    @include box_flex(
                        $width: 100%,
                        $height: auto,
                        $direction: row,
                        $justify: flex-start,
                        $align: center
                    );

                    padding: 20px 0;
                    .label {
                        @include box_flex(
                            $width: auto,
                            $height: auto,
                            $direction: row,
                            $justify: flex-start,
                            $align: center
                        );

                        margin-right: 20px;
                        width: attr(label-width);
                    }
                    .label[align='left'] {
                        @include box_flex(
                            $width: auto,
                            $height: auto,
                            $direction: row,
                            $justify: flex-start,
                            $align: center
                        );
                    }
                    .label[align='center'] {
                        @include box_flex(
                            $width: auto,
                            $height: auto,
                            $direction: row,
                            $justify: center,
                            $align: center
                        );
                    }
                    .label[align='right'] {
                        @include box_flex(
                            $width: auto,
                            $height: auto,
                            $direction: row,
                            $justify: flex-end,
                            $align: center
                        );
                    }
                }
            }
        }
    }
    .info-contener[size='default'] {
        .row {
            .col {
                .item {
                    padding: 20px 0;
                }
            }
        }
    }
    .info-contener[size='medium'] {
        .row {
            .col {
                .item {
                    padding: 16px 0;
                }
            }
        }
    }
    .info-contener[size='small'] {
        .row {
            .col {
                .item {
                    padding: 10px 0;
                    font-size: 13px;
                }
            }
        }
    }
    .info-contener[size='mini'] {
        .row {
            .col {
                .item {
                    padding: 8px 0;
                    font-size: 12px;
                }
            }
        }
    }
    .box {
        @include box_flex(
            $width: 60%,
            $height: 50px,
            $direction: column,
            $justify: center,
            $align: center
        );

        border: solid 1px #000000;
        .items {
            @include box_flex(
                $width: auto,
                $height: auto,
                $direction: column,
                $justify: center,
                $align: center
            );

            margin: 0 10px;
            padding: 5px 10px;
            white-space: nowrap;
            color: #ffffff;
            background: red;
        }
    }
}
</style>
